import { Breadcrumb, Select, Input } from 'antd'
import { Table, Popconfirm, Button, Modal, Form, Switch, Space, DatePicker } from 'antd';
import React from 'react';
import { useState } from 'react';
const { Option } = Select;
import '../assets/styles/YseckillShop.less'
const { RangePicker } = DatePicker;
import { instance } from '../../../api/request'

const { Search } = Input;
export default function seckillShop() {
    const [dataSource, setdataSource] = useState([])
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [record, setrecord] = useState<any>({})
    const [upstate, setupstate] = useState<any>(false)
    const [checked, setchecked] = useState(false)
    React.useEffect(() => {
        findData()
    }, [])

    async function findData() {
        const res = await instance.get('/seckillList')
        res.data.forEach((item: any, index: any) => {
            item.key = index
        })
        setdataSource(res.data)
    }

    async function del(record: any) {
        console.log(record, 1111);
        const res = await instance.post('/seckillList/delBoth', record)
    }

    function showModal(record: any) {

        setrecord(record)
        setIsModalVisible(true);
    }

    //点击小叉号就进行关闭
    function handleCancel() {
        setIsModalVisible(false)
    }
    //编辑
    async function onFinish(e: any) {


        const times = e.times[0].format('YYYY-MM-DD HH:mm:ss') + '-' + e.times[1].format('YYYY-MM-DD HH:mm:ss')
        console.log(record, 999);
        console.log(upstate, 111);

        const obj = {
            id: record.id,
            name: e.name,
            times: times,
            actitle: e.actitle,
            actIntro: e.actIntro,
            tid: record.tid,
            sid: record.sid,
            seckillPrice: e.seckillPrice,
            origCost: e.origCost,
            limit: e.limit,
            state: upstate
        }
        console.log(obj);

        const res = await instance.post('/seckilltime/updateBoth', obj)
        console.log(res)


        setIsModalVisible(false);
    }
    function updateChange(e: any) {
        setupstate(e)
    }


    const columns: any = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '配置',
            dataIndex: 'name',
            key: 'name',

        },
        {
            title: '秒杀时段',
            dataIndex: 'times',
            key: 'times',
        },
        {
            title: '商品图片',
            dataIndex: 'img',
            render: (_: any, record: any) => {

                return <>
                    <div style={{ display: 'flex' }}>
                        <img style={{ width: '4rem', height: '4rem', marginRight: '0.5rem' }} src={record.img} />
                    </div>
                </>
            }
        },
        {
            title: '活动标题',
            dataIndex: 'designation',
            key: 'designation',
        },
        {
            title: '活动简介',
            dataIndex: 'actIntro',
            key: 'actIntro',
        },
        {
            title: '原价',
            dataIndex: 'sellingprice',
            key: 'sellingprice',
        },
        {
            title: '秒杀价',
            dataIndex: 'seckillPrice',
            key: 'seckillPrice',
        },
        {
            title: '限量',
            dataIndex: 'limitNum',
            key: 'limitNum',
        },
        // {
        //     title: '限量剩余',
        //     dataIndex: 'limitResidue',
        //     key: 'limitResidue',
        // },
        {
            title: '秒杀状态',
            key: 'state',
            dataIndex: 'state',
            render: () => {


                return <>
                    <Switch defaultChecked checked={record.state ? true : false} />
                </>
            }
        },
        {
            title: '创建时间',
            key: 'createTime',
            dataIndex: 'createTime',
        },
        {
            title: '操作',
            key: '操作',
            render: (_: any, record: any) => {
                return <>
                    <Popconfirm title="您确定要删除吗?" onConfirm={() => del(record)}>
                        <Button type="primary">删除</Button>
                    </Popconfirm>
                    <Button type="primary" onClick={() => showModal(record)}>编辑</Button>
                    <Modal title="编辑" visible={isModalVisible} onCancel={() => handleCancel()} footer={[]}>
                        <Form name="basic" onFinish={(e) => onFinish(e)}>
                            <Form.Item label="配置" name="name">
                                <Input />
                            </Form.Item>

                            <Form.Item label="秒杀时段" name="times">
                                <RangePicker />
                            </Form.Item>

                            <Form.Item label="活动标题" name="actitle">
                                <Input />
                            </Form.Item>

                            <Form.Item label="活动介绍" name="actIntro">
                                <Input />
                            </Form.Item>

                            <Form.Item label="秒杀价格" name="seckillPrice">
                                <Input />
                            </Form.Item>

                            <Form.Item label="原价" name="origCost">
                                <Input />
                            </Form.Item>
                            <Form.Item label="限量" name="limit">
                                <Input />
                            </Form.Item>

                            <Form.Item label="状态" valuePropName="checked">
                                <Switch defaultChecked onChange={(e) => updateChange(e)} />
                            </Form.Item>


                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    编辑
                                </Button>
                            </Form.Item>
                        </Form>
                    </Modal>
                </>
            }


        },
    ]
    return (

        <div className="YseckillShop">
            <div className="top">
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>营销</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        秒杀管理
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/seckillShop" className="skeill">秒杀商品</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className="bottom">
                <div className="searchbox">
                    <Space size="large">
                        <div className="show">
                            <span className="shi">是否显示</span>
                            <Select defaultValue="请选择" style={{ width: 120 }} >
                                <Option value="1">关闭</Option>
                                <Option value="2">开启</Option>
                            </Select>
                        </div>
                        <div className="show1">
                            <span>配置名称</span>
                            <Select defaultValue="请选择" style={{ width: 120 }} >
                                <Option value="1">双11</Option>
                                <Option value="2">双12</Option>
                            </Select>
                        </div>
                        <div className="searchName">
                            <div className="shop">商品搜索</div>
                            <Search placeholder="请输入商品ID/名称" enterButton />
                        </div>
                    </Space>
                </div>
                <Table dataSource={dataSource} columns={columns} ></Table>

            </div>
        </div>
    )
}
